<template>
  <!--商品详情-->
    <div class="commodity">
      <div class="top">
        <div class="Top_title">
          <div class="back" @click="back">
            <span></span>
          </div>
          <p>商品详情</p>
        </div>
        <!--轮播图-->
        <div class="sideshow">
          <slideshow></slideshow>
        </div>
        <div class="PriceDetails">
          <div class="one">
              ￥<span>{{this.topTitleList.SpellPrice}}</span>.00 <span class="numberPeople">2&nbsp;<span>人拼</span></span>
            <del>￥{{this.topTitleList.originalPrice}}.00</del>
          </div>
          <div class="spellingNumber">以拼<span>{{this.topTitleList.spellingNumber}}</span>件</div>
        </div>
        <div class="productName padding">
          <div class="heading">
            <p>
              <span>包邮</span>
              <span>自营</span>
              {{this.topTitleList.title}}
            </p>
            <ul>
              <li>
                <img src="./icons/guanzhu.jpg" alt="">
                <p>关注</p>
              </li>
              <li>
                <img src="./icons/fenxiang.jpg" alt="">
                <p>分享</p>
              </li>
            </ul>
          </div>
          <p>
            <span class="describe"
                  v-for="(item, key) in this.topTitleList.idiom"
                  :key = "key"
                >{{item}}</span>
          </p>
          <div class="appoint">
            <p>服务 <img src="./icons/ok.png" alt="">
              <span>商品包邮</span>
              <img src="./icons/ok.png" alt="">
              <span>七天无理由退款</span>
            </p>
            <div class="advance">
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <!--直接参与可快速成团-->
      <div class="RapidDough padding">
        <div class="hint">
          直接参与可快速成团
        </div>
        <div class="information" v-for="(item, key) in CloudsUserList" :key="key">
          <div class="graphic">
            <img v-lazy="item.img" alt="">
          </div>
          <div class="phone">
            {{item.phone}}
          </div>
          <div class="TuxedoImmediately">
            <div class="ends">
              <p>还差 <span>{{item.integer}}人</span>成团</p>
              <p>距结束还有<span>{{item.dateNow}}.<a>1</a></span> </p>
            </div>
            <button>立即参团</button>
          </div>
        </div>
      </div>
      <!--选择-->
      <div class="select padding">
        <p>选择<span>1.5L经典珍珠白 1件</span></p>
        <div class="advance"><span></span></div>
      </div>
      <!--送至-->
      <div class="deliver padding">
        <div class="send">
         <span>送至</span>
        </div>
        <div class="site">
          <p><span>湖北省</span><span>武汉市</span><span>洪山区</span></p>
          <p>11:00前成团，预计今天（6月10日）送达</p>
        </div>
        <div class="advance"><span></span></div>
      </div>
      <!--用户评价-->
      <div class="friendsSaid padding">
        <div class="effect"><p>拼友们说(1198条)</p>
          <div class="favorable"><img src="./icons/zan.png" alt="">好评率99%</div>
          <div class="advance"><span></span></div></div>
        <div class="ascendant">
          <span>烧水快(53)</span><span>产品美观(49)</span><span>物美价廉(46)</span>
        </div>
        <div class="evaluate">
          <section>
            <div class="evaluateList" v-for="(item, key) in CloudsUserList" :key = "key">
              <div class="user">
                <div class="userPhone">
                  {{item.phoneOne}}
                </div>
                <!--五星评价-->
                <div class="appraise">
                  <span class="iconfont icon-wuxinghaoping" v-for="(val, index) in [1,2,3,4,5]" :key ="index"></span>
                </div>
                <p>{{item.evaluate}}</p>
              </div>
            </div>
          </section>
        </div>
      </div>
      <!--热销和猜你喜欢-->
      <div class="hotAndLike">
        <div class="topTitle">
          <span v-for="(value,key) in HotLikeList" :key="key">{{value.title}}</span>
          <div class=""></div>
        </div>
        <ul>
          <li v-for="(val, key) in HotAndLikeList" :key = "key">
            <img v-lazy="val.img" alt="#">
            <p>{{val.headline}}</p>
            <span>￥{{val.integer}}</span>
          </li>
        </ul>
      </div>
      <!--拼团规则-->
      <div class="SpellingRules padding">
        <span>拼团规则</span>
        <p>开团或参团-人满发货-人没满退款</p>
        <div class="advance"><span></span></div>
      </div>
      <div class="OneDollarRound">
        <OneDollarRound></OneDollarRound>
      </div>
      <div class="GraphicDetails padding">
        <img src="./icons/pic.png" alt="">
        <span>图文详情</span>
      </div>
      <!--美的产品广告-->
      <div class="esthetical">
        <div class="Advertising">
        </div>
        <ul>
          <li v-for="(value, key) in HotAndLikeList" :key="key">
            <div>
              <p>{{value.headline}}</p>
              <span>{{value.idiom}}</span>
              <p>￥<del>{{value.integer}}</del></p>
              <button>立即加购</button>
            </div>
            <img v-lazy="value.img" alt="#">
          </li>
        </ul>
      </div>
      <!--底部-->
      <footer>
        <div class="left">
          <img src="./icons/home.png" alt="">
          <img src="./icons/cart.png" alt="">
        </div>
        <div class="right">
          <button class="oneself">
            <span>￥{{this.topTitleList.originalPrice}}.00</span>
            <span>单独购买</span>
          </button>
          <button class="buying">
            <span>￥{{this.topTitleList.SpellPrice}}.00</span>
            <span>我要开团</span>
          </button>
        </div>
      </footer>
    </div>
</template>

<script>
  import slideshow from './slideshow';
  import './font_yltb5ubcimn/iconfont.css'
  import OneDollarRound from '../lbt/LBT'
    export default {
        name: "commodity",
      data(){
        return{
          HotLikeList:[{title:'热销排行',className:'pointerHot'},{title:'猜你喜欢',className:'pointerLike'}],
          topTitleList: [],
          CloudsUserList:[],
          HotAndLikeList:[]
        }
      },
      methods:{
        back(){
          this.$router.push({path:'/index/auth'});
        },
        // 标题数据
        TitleList(){
          this.$http.get('/topTitle')
            .then((res) => {
              this.topTitleList = res.data.topTitle;
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 用户评价
        CloudsUser(){
          this.$http.get('/CloudsUser')
            .then((res) => {
              this.CloudsUserList = res.data.CloudsUser;
            })
            .catch((err) => {
              console.log(err);
            })
        },
        HotAndLick(){
          this.$http.get('/HotAndLick')
            .then((res) => {
              this.HotAndLikeList = res.data.HotAndLick;
            })
            .catch((err) => {
              console.log(err);
            })
        }
      },
      created(){
        this.TitleList();
        this.CloudsUser();
        this.HotAndLick();
      },
      components:{
        slideshow,
        OneDollarRound
      }
    }
</script>

<style scoped lang="scss">
  .padding{
    padding-left: 50px;
    box-sizing: border-box;
  }
  .describe{
    color: #666;
    margin-right: 33px;
  }
.commodity{
  width: 100vw;
  overflow: hidden;
  background: #f2f2f2;
  padding-bottom: 170px;
  .top{
    height: 2000px;
    background: white;
    .Top_title{
      height: 140px;
      display: flex;
      /*垂直轴居中*/
      align-items: center;
      p{
        flex: 1;
        text-align: center;
        font-size: 50px;
      }
      .back{
        width: 140px;
        height: 140px;
        line-height:160px;
        position: absolute;
        text-align: center;
        span{
          display: inline-block;
          width: 50px;
          height: 50px;
          text-align: center;
          border: solid 2px #363c43;
          border-left: none;
          border-bottom: none;
          transform: rotate(225deg);
        }
      }
    }
    .sideshow{
      height: 1245px;
      border-top: 5px solid #f2f2f2;
      box-sizing: border-box;
    }
    .PriceDetails{
      height: 200px;
      background: url("./icons/154803967516466376.png") no-repeat 0 0;
      background-size: 100% 100%;
      padding: 35px 50px;
      box-sizing: border-box;
      align-items: center;
      display: flex;
      .one{
        width: 375px;
        font-size: 45px;
        color: white;
        flex-wrap: wrap;
        flex: 1;
        span{
          font-size: 60px;
        }
        .numberPeople{
          width: 135px;
          height: 50px;
          background: white;
          color: orangered;
          font-size: 26px;
          border-radius: 10px;
          align-items: center;
          justify-content: flex-end;
          margin-left: 20px;
          border: solid 3px #fff;
          span{
            width: 80px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 25px;
            background: orangered;
            border-radius:0 10px 10px 0;
            text-align: center;
          }
        }
        del{
          display: block;
          width: 100%;
          margin-top: 30px;
          font-size: 30px;
          color: rgba(255,255,255,.5);
        }
      }
      .spellingNumber{
        width: 230px;
        font-size: 40px;
        height: 100px;
        color: white;
      }
    }
    .productName{
      height: 420px;
      box-sizing: border-box;
      padding-top: 35px;
      .heading{
        height: 120px;
        display: flex;
        p{
          flex: 1;
          margin: 0;
          text-align: left;
          font-size: 50px;
          line-height: 70px;
          span{
            font-size: 30px;
            display: inline-block;
            width: 110px;
            height: 50px;
            line-height: 50px;
            border-radius: 25px;
            text-align: center;
            color: white;
          }
          span:nth-child(1){
            background: linear-gradient(#ef8f34, #ec632a);
          }
          span:nth-child(2){
            background: #eb4f3f;
          }
        }
        ul{
          width: 250px;
          list-style: none;
          display: flex;
          padding: 0;
          line-height: 0;
          li{
            flex: 1;
            text-align: center;
            img{
              width: 60px;
              height: 60px;
            }
            p{
              font-size: 30px;
              text-align: center;
            }
          }
        }
      }
      p{
        font-size: 37px;
      }
      .appoint{
        line-height: 140px;
        display: flex;
        p{
          flex: 1;
          margin: 0;
          color: #a5a5a5;
          font-size: 40px;
          img{
            width: 40px;
            height: 40px;
            vertical-align: middle;
            margin:0 20px 0 40px;
          }
          span{
            font-size: 35px;
            color: #000;
            vertical-align: middle
          }
        }
        .advance{
          width: 60px;
          height: 140px;
          line-height: 140px;
          padding-right: 45px;
          span{
            display: inline-block;
            width: 40px;
            height: 40px;
            border: solid 2px #a3a3a3;
            border-top:none;
            border-left:none;
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
/*直接参与可快速成团*/
  .RapidDough{
    height: 545px;
    box-sizing: border-box;
    margin: 35px 0;
    background: white;
    .hint{
      line-height: 145px;
      font-size: 45px;
      border-bottom: 2px solid #f4f4f4;
    }
    .information{
      height: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 50px;
      box-sizing: border-box;
      .graphic{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: solid 2px #ebebeb;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .phone{
        margin-left: 10px;
        font-size: 35px;
      }
      .TuxedoImmediately{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        .ends{
          margin-right: 20px;
          p{
            font-size: 35px;
            margin: 0;
            text-align: right;
            height: 50px;
            line-height: 60px;
            span{
              font-size: 30px;
            }
          }
          p:nth-child(1) span{
            color: red;
          }
        }
        button{
          width: 227px;
          height: 106px;
          background:linear-gradient(#ec6a42, #ea4043);
          font-size: 40px;
          border: none;
          outline: none;
          color: white;
          border-radius: 15px;
          padding: 0;
        }
      }
    }

  }
  /*选择*/
  .select{
    height: 170px;
    line-height: 170px;
    display: flex;
    padding-right: 45px;
    font-size: 43px;
    background: white;
    p{
      flex: 1;
      margin:0;
      color: #999;
      span{
        color: #000;
        margin-left: 35px;
      }
    }
    .advance{
      width: 60px;
      span{
        display: inline-block;
        width: 40px;
        height: 40px;
        border: solid 2px #a3a3a3;
        border-top:none;
        border-left:none;
        transform: rotate(-45deg);
      }
    }
  }
  /*送至*/
  .deliver{
    height: 195px;
    padding-right: 45px;
    background: white;
    margin: 35px 0;
    display: flex;
    align-items: center;
    font-size: 43px;
    p{
      margin: 0 35px;
    }
    .send{
      color: #999;
      height: 100px;
      vertical-align: top;
    }
    .site{
      flex: 1;
    }
    /*前进标签*/
    .advance{
      width: 60px;
      display: flex;
      align-items: center;
      span{
        width: 40px;
        height: 40px;
        border: solid 2px #a3a3a3;
        border-top:none;
        border-left:none;
        transform: rotate(-45deg);
      }
    }
  }
  /*用户评价*/
  .friendsSaid{
    font-size: 45px;
    height: 755px;
    background: white;
    .effect{
      display: flex;
      height: 145px;
      border-bottom: 2px solid #f4f4f4;
      align-items: center;
      text-indent: 5px;
      p{
        flex: 1;
      }
      .favorable{
        font-size: 35px;
        color: #ec5e51;
        img{
          width: 45px;
          height: 45px;
          margin-right: 15px;
          vertical-align: bottom;
        }
      }
      .advance{
        width: 60px;
        display: flex;
        align-items: center;
        margin-right: 45px;
        span{
          width: 40px;
          height: 40px;
          border: solid 2px #a3a3a3;
          border-top:none;
          border-left:none;
          transform: rotate(-45deg);
        }
      }
    }
    .ascendant{
      line-height: 170px;
      span{
        font-size: 38px;
        margin-right: 35px;
        padding: 30px;
        color: #333;
        background: #fbedea;
        border-radius: 10px;
      }
    }
    .evaluate{
      width: 95vw;
      height: 400px;
      overflow-X: auto;
      section{
        width: 100vw;
        height: 400px;
        display: flex;
        .evaluateList{
          display: inline-block;
          width: 615px;
          height: 400px;
          border-radius: 20px;
          border: solid 5px #f2f2f2;
          margin-right: 35px;
          box-sizing: border-box;
          padding: 40px 30px;
        }
      }
      .iconfont{
        color: #f5bf4a;
      }
    }
  }
/*<!--热销和猜你喜欢-->*/
  .hotAndLike{
    background: #fff;
    height: 1330px;
    padding: 50px;
    margin: 35px 0;
    .topTitle{
      display: flex;
      position: relative;
      span{
        flex: 1;
        text-align: center;
        height: 70px;
        line-height: 70px;
      }
      span:nth-child(1){
        border-right: 5px solid #f2f2f2;
        box-sizing: border-box;
      }
      .pointerHot{
        position: absolute;
        width: 100px;
        height: 5px;
        background: #abcdef;
        bottom: -20px;
        border-radius: 3px;
        left: 230px;
        transition: all .5s ease-in-out;
      }
    }
    ul{
      margin: 20px 0 0 0;
      padding: 0;
      list-style: none;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: 0;
      box-sizing: border-box;
      li{
        width: 360px;
        margin: 30px 20px 30px 0;
        font-size: 0;
        height: 570px;
        img{
          height: 420px;
        }
        p{
          font-size: 40px;
          line-height: 56px;
          color: #333;
          margin: 0;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //需要控制的文本行数
          overflow: hidden;
        }
        span{
          font-size: 45px;
          color: #eb5a4b;
        }
      }
    }
  }
/*<!--拼团规则-->*/
  .SpellingRules{
    height: 150px;
    display: flex;
    align-items: center;
    font-size: 40px;
    background: #fff;
    span{
      color: #999;
    }
    p{
      color: #333;
      flex: 1;
      margin: 0 0 0 35px;
    }
    .advance{
      width: 120px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-right: 50px;
      span{
        width: 40px;
        height: 40px;
        border: solid 2px #a3a3a3;
        border-top:none;
        border-left:none;
        transform: rotate(-45deg);
      }
    }
  }
  /*全场一元起*/
  .OneDollarRound{
    height: 330px;
    margin-top: 35px;
    overflow: hidden;
  }
  /*图文详情*/
  .GraphicDetails{
    height: 120px;
    display: flex;
    background: #fff;
    align-items: center;
    img{
      height: 50px;
      width: 50px;
    }
    span{
      font-size: 45px;
      margin-left: 20px;
    }
  }
  /*美的产品广告*/
  .esthetical{
    background: #d8cbbf;
    .Advertising{
      height: 250px;
      background: url("./icons/53331a27-047b-4c50-bfa5-3ae2854d8515.gif") no-repeat 0 0;
      background-size: 100% 100%;
      margin-bottom: 20px;
    }
    ul{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li{
        width: 31.6%;
        margin: 10px;
        height: 240px;
        background: #fff;
        font-size: 12px;
        border-radius: 20px;
        border: solid 1px transparent;
        box-sizing: border-box;
        display: flex;
        div{
          padding: 0 0  22px 26px;
          box-sizing: border-box;
          flex: 1;
          p{
            margin: 14px 0 0 0;
            font-size: 35px;
            color: #b84251;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 156px;
          }
          span{
            color: #9a9a9a;
            font-size: 22px;
            display: inline-block;
            width: 156px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          button{
            background: #f2a73c;
            line-height: 40px;
            font-size: 20px;
            color: #999;
            outline: none;
            border: none;
            padding: 0;
            border-radius: 5px;
          }
        }
        img{
          width: 185px;
          height: 210px;
          object-fit: contain;
        }
      }
    }
  }
  /*底部*/
  footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    height: 170px;
    z-index: 999;
    .left{
      width: 280px;
      display: flex;
      box-sizing: border-box;
      padding: 25px;
      img{
        flex: 1;
        width: 70px;
        height: 70px;
        margin: 25px;
      }
    }
    .right{
      flex: 1;
      display: flex;
      border-radius: 30px;
      overflow: hidden;
      margin-left: 50px;
      button{
        background: none;
        outline: none;
        border: none;
        color: #fff;
        font-size: 42px;
        span{
          display: block;
        }
      }
      .oneself{
        background: #f2aeb1;
        width: 400px;
      }
      .buying{
        flex: 1;
        background: #ea4143;
      }
    }
  }
}
</style>
